<template>
	<div class="NavBar clearfix" :style="{ backgroundColor: modelData.bgColor }">
		<div class="nav-li" v-for="(item, index) in modelData.navList" :key="index" :style="{ width: 100 / modelData.num + '%' }" @click="navTo(item.url, item.switchTab)">
			<image class="nav-icon" :src="item.image.url" mode="aspectFit"></image>
			<div :style="{ color: modelData.color }" class="nav-text">{{ item.text || '文字标题' }}</div>
		</div>
		<NoLoginTip @cancel="cancelTip" :show="loginTip" v-if="loginTip"/>
	</div>
</template>

<script>
import NoLoginTip from '../../NoLoginTip.vue';
export default {
	name: 'NavBar',
	components: {
		NoLoginTip
	},
	props: {
		modelData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			loginTip: false
		};
	},
	methods: {
		cancelTip(){
			this.loginTip = false;
		},
		navTo(url, switchTab) {
			if (!this.$common.isLogin()) {
				this.loginTip = true;
			} else {
				this.goPage(url, switchTab);
			}
		}
	}
};
</script>

<style scoped>
.NavBar {
	 padding: 32rpx 0 8rpx;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	justify-content: space-between;
	flex-wrap: wrap;
}
.nav-icon {
	width: 88upx;
	height: 88upx;
	border-radius: 20rpx;
	margin: 0 auto;
	display: block;
}
.nav-text {
	padding-top: 12upx;
}
.nav-li {
	font-size: 24upx;
	text-align: center;
	font-weight: 400rpx;
	margin-bottom: 24upx;
}
</style>
